<template>
  <div :class="[`${program}+artist-category`]">
    <div class="aritist-category-menu">
      <div class="aritist-category-menu-item">
        <div class="aritist-category-menu-item-title">语种：</div>
        <b-menu
          class="item-menu"
          :menu="areas"
          item-height="30px"
          item-width="80px"
          :active-show-border="false"
          @click="handelArea"
          :active-color="getActiveColor"
        >
        </b-menu>
      </div>
      <div class="aritist-category-menu-item">
        <div class="aritist-category-menu-item-title">分类：</div>
        <b-menu
          class="item-menu"
          :menu="type"
          item-height="30px"
          item-width="80px"
          :active-show-border="false"
          @click="handelType"
          :active-color="getActiveColor"
        >
        </b-menu>
      </div>
      <div class="aritist-category-menu-item">
        <div class="aritist-category-menu-item-title">筛选：</div>
        <b-menu
          class="item-menu"
          :menu="Fnames"
          item-height="30px"
          item-width="80px"
          :active-show-border="false"
          @click="handleFname"
          :active-color="getActiveColor"
        >
        </b-menu>
      </div>
    </div>
    <div class="artist-category-container">
      <music-list :aritist="false" :musiclist="artistList"></music-list>
    </div>
    <div class="page_wrap">
      <el-pagination
        background
        :total="1500"
        layout="prev,pager,next"
        :page-size="30"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { areas, type, Fnames } from './data'
import { theme } from '../../mixin/global/theme'
import { _getArtist } from '../../network/aritist'
import musicList from '../../components/Musiclist/Musiclist.vue'

export default {
  mixins: [theme],
  components: { musicList },
  data () {
    return {
      areas,
      type,
      Fnames,
      currentArea: -1, //语种
      currentType: -1, //歌手类型
      currentName: -1, //筛选条件
      limit: 30, //条数
      offset: 1, //页码
      artistList: [] //歌手列表数据
    }
  },
  created () {
    this.getArtist()
  },
  methods: {
    pageChange (val) {
      //页码
      this.offset = val
      this.getArtist()
    },
    handelArea (index) {
      //语种菜单点击
      console.log(index)
      this.currentArea = this.areas[index].value
      this.getArtist()
    },
    handelType (index) {
      //歌手类型
      this.currentType = this.type[index].value
      this.getArtist()
    },
    handleFname (index) {
      //筛选
      this.currentName = this.Fnames[index].value
      this.getArtist()
    },
    async getArtist () {
      // 获取歌手
      var res = await _getArtist(
        this.currentArea,
        this.currentType,
        this.currentName,
        this.limit, //每页的条数
        (this.offset - 1) * this.limit
      )
      console.log(res)
      this.artistList = res.data.artists
    }
  }
}
</script>
<style lang="less">
.dance-music-artist-category {
  padding: 10px 100px 0px 100px;
}
.aritist-category-menu {
  font-size: 13px;
  &-item {
    margin: 5px 0;
    padding-left: 10px;
    display: flex;
    align-items: center;
    &-title {
      padding: 0px 8px 0px 0px;
      height: 100%;
      width: 60px;
      span {
        flex: 1;
        display: inline-block;
        background: #8f9096;
        padding: 3px 5px;
        border-radius: 4px;
      }
    }
    .item-menu {
      width: (100% - 80px);
    }
  }
}
.page_wrap {
  margin: 20px 0;
}
</style>
